<template>
    <div class="box" ref="charts">

    </div>
</template>

<script setup lang="ts">
//引入echarts
import * as echarts from 'echarts';
//引入组合式API
import { ref, onMounted, watch } from 'vue';
//获取容器的DOM节点
let charts = ref();
//定义一个mycharts，让他成为全局属性
let mycharts;
//封装函数，返回mychart配置对象
const getOption = () => {
    return {
        xAxis: {
            type: 'category',//x轴均分
            show: false,//隐藏x轴
            boundaryGap: false,//x轴两边不留白
        },
        yAxis: {
            show: false,
        },
        series: {
            type: 'line',//线形图
            data: props.data,//数据
            smooth: true,//直线变曲线
            itemStyle: {
                //拐点样式
                opacity: 0,//拐点透明度为0，隐藏
            },
            //区域填充
            areaStyle: {
                color: {//渐变色
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: "skyblue", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "white", // 100% 处的颜色
                        },
                    ],
                    global: false, // 缺省为 false
                },
            }
        },
        //调整图形图标的布局
        grid:{
            left:0,
            right:0,
            top:0,
            bottom:0,
            // show:true,
            //图标底层的颜色
            // backgorundColor:"red"
        },
        //提示插件
        tooltip:{
            trigger:'axis',
            //限制展示区域
            confine:true
        }
    }
};
//初始化echarts实例
onMounted(() => {
    mycharts = echarts.init(charts.value);
    //配置项
    mycharts.setOption(getOption());

    //绑定浏览器狂口变化的事件
    //DOM0事件后者会覆盖前者，DOM2事件可用
    window.addEventListener('resize', () => {
        mycharts.resize();
    })
});

//接收父组件传递过来的数据
let props = defineProps(['data']);
//监听父组件传递过来的数据
//数据变化，watch监听，重新配置
watch(() => props.data, () => {
    mycharts.setOption(getOption());
})
</script>
<style scoped>
.box {
    width: 100%;
    height: 100%;
    border-bottom: 1px solid #ccc
}
</style>